<table class="easyui-datagrid" data-options="method:'GET',url:'user',singleSelect:true" toolbar="#userToolbar"
       id="userTable">
    <thead>
    <tr>
        <th data-options="field:'',width: 100,checkbox:true"></th>
        <th data-options="field:'id',width: 300">编码</th>
        <th data-options="field:'username',width: 100">名称</th>
        <th data-options="field:'password',width: 100">密码</th>
        <th data-options="field:'description',width: 100">描述</th>
    </tr>
    </thead>
</table>
<div id="userToolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
       onclick="$('#userAdd').dialog('open')">添加用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="
    var selected = $('#userTable').datagrid('getSelected');
    if (!selected){
        $.messager.alert('警告','请选择一个用户!');
    }else{
        console.log($('#userEditForm').form('load',selected));
        $('#userEdit').dialog('open');
    }
    ">编辑用户</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="
    var selected = $('#userTable').datagrid('getSelected');
    if (!selected){
        $.messager.alert('警告','请选择一个用户!');
    }else{
         $('#roleList').datalist('reload');
        $('#roleList').datalist('clearSelections');
        selected['roles'].forEach(role=>$('#roleList').datalist('selectRecord',role['id']));
        $('#roleGrant').dialog('open');
    }
    ">角色分配</a>
</div>
<div id="userAdd" class="easyui-dialog" title="添加用户" data-options="closed:true,modal:true" style="width: 250px;height: 300px;">
    <form id="userAddForm" method="post">
        <td><input class="easyui-textbox" type="hidden" name="id"></td>
        <table cellpadding="5">
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" name="username"></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="easyui-textbox" type="text" name="password"></td>
            </tr>
            <tr>
                <td>描述:</td>
                <td><input class="easyui-textbox" type="text" name="description"></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.post('user',$('#userAddForm').serialize(),function(){$('#userAdd').dialog('close');$('#userTable').datagrid('reload');})">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton">重置</a>
    </div>
</div>
<div id="userEdit" class="easyui-dialog" title="编辑用户" data-options="closed:true,modal:true" style="width: 250px;height: 300px;">
    <form id="userEditForm" method="post">
        <td><input class="easyui-textbox" type="hidden" name="id"></td>
        <table cellpadding="5">
            <tr>
                <td>名称:</td>
                <td><input class="easyui-textbox" type="text" name="username" readonly></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="easyui-textbox" type="text" name="password"></td>
            </tr>
            <tr>
                <td>描述:</td>
                <td><input class="easyui-textbox" type="text" name="description"></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.put('user',$('#userEditForm').serialize(),function(){$('#userEdit').dialog('close');$('#userTable').datagrid('reload');})">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton">重置</a>
    </div>
</div>
<div id="roleGrant" class="easyui-dialog" title="角色分配" data-options="closed:true,modal:true" style="width: 250px;height: 350px;">
    <td><input class="easyui-textbox" type="hidden" name="id"></td>
    <table cellpadding="5">
        <tr>
            <td>
                <ul id="roleList" class="easyui-datalist" data-options="url:'role',method:'GET',textField:'name',valueField:'id',singleSelect:false,idField:'id'" style="width:150px;height:200px">
                </ul>
            </td>
        </tr>
    </table>
    <div style="text-align:center;padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="$.post('user/'+$('#userTable').datagrid('getSelected')['id']+'/role','roleIds='+$('#roleList').datalist('getSelections').map(record => record['id']).join(','),function(){$('#roleGrant').dialog('close');$('#userTable').datagrid('reload');})">提交</a>
    </div>
</div>
